<template>
  <div class="box">
    <p class="p-head">提现费率：{{head.poundage_cash}} 最低提现金额：{{head.min_cash}}</p>
    <div class="head">
      <div class="list">
        <div class="cont">
          <p>分销人数：<span>{{head.user_total}}</span></p>
        </div>
      </div>
      <div class="list">
        <div class="cont">
          <p>成单总数：<span>{{head.order_total}}</span></p>
        </div>
      </div>
      <div class="list">
        <div class="cont">
          <p>可提现金额：<span>{{head.user_balance}}</span></p>
          <el-button @click="txbtn()" style="float:right;margin-top: 4px;" size="mini" class="go" type="danger">申请提现</el-button>
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="receipt_time"
        label="日期"
        width="96">
      </el-table-column>
      <el-table-column
        prop="order_number"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="total"
        label="订单金额"
        width="86">
      </el-table-column>
      <el-table-column
        prop="rebate"
        label="返利金额"
        width="76">
      </el-table-column>
    </el-table>
    <div class="compage">
      <span @click="syy()"><p>上一页</p></span>
      <span :class="page == n ? 'active':''" v-for="n in last_page" @click="pageon(n)"><p>{{n}}</p></span>
      <span @click="xyy()"><p>下一页</p></span>
    </div>
  </div>
</template>

<script>
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
        uid : this.$store.state.userid,
        head:{},
        tableData: [],
        page: 1,
        last_page: 1
    }
      
  },
  methods:{
    txbtn:function(){
      // this.head.min_cash>this.head.user_balance
      if(this.head.min_cash>this.head.user_balance){
        
          this.$messagebox.confirm('可提现金额低于最低提现金额，不能提现','提示',{
            confirmButtonText:'确定'
          }).then(() => {
                
          }).catch(() => {
                        
          });
      }else{
        this.$router.push({ path: '/txpage' })
      }
    },
    pageon:function(n){
      this.page = n
      this.getlist()
    },
    syy:function(){
      if(this.page != 1){
        this.page = this.page -1;
        this.getlist()
      }
    },
    xyy:function(){
      if(this.page<this.last_page){
        this.page = this.page +1;
        this.getlist()
      }
    },
    getinfo:function(){
      this.$http.post("/index.php/user/item/itemOrder",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  uid: this.$store.state.userid

              }))
              .then(res => {
                console.log(res)
                this.head = res.data.data
              })
              .catch(error => {
                alert("网络错误")
              });
    },
    getlist:function(){
      this.$http.post("/index.php/user/item/itemOrderList",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  uid: this.$store.state.userid,
                  page: this.page

              }))
              .then(res => {
                this.tableData = res.data.data.data
                this.last_page = res.data.data.last_page
                console.log(this.tableData)
              })
              .catch(error => {
                alert("网络错误")
              });
    }
  },
  components:{
    
  },
  created(){
    this.getinfo();
    this.getlist();
  },
  watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.path == 'mydistribution'){
                  this.getinfo();
                  this.getlist();
                }
              }
        }
}
</script>

<style scoped lang="less">
.p-head{
  padding-bottom: 10px;
  text-align: right;
  padding-top: 20px;
  padding-right: .2rem;
}
.box{
  width: 100%;
  zoom: 1;
  height: auto;
  overflow: hidden;
  text-align: left; 
  .head{
    padding: 0 .2rem;
    height: auto;
    zoom: 1;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #d6d6d6;
    .list{
      float: left;
      width: 100%;
      text-align: left;
      line-height: 36px;
      p{
        float: left;
      }
      span{
        color: #54b84c;
        font-weight: bold;
      }
    }
  }
}
</style>
